import { View, Button } from '@tarojs/components'
import { useState } from 'react'
import './index.scss'

type Direction = 'column' | 'row'
type JustifyContent =  'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between'
const justifyArr: JustifyContent[] = [ 'flex-start', 'flex-end', 'center', 'space-around', 'space-between']
type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse'
const wrapArr: Wrap[] = ['wrap' , 'nowrap' , 'wrap-reverse']
type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-around' | 'space-between'
const alignArr: AlignContent[] = ['flex-start' , 'flex-end' , 'center' , 'stretch' , 'space-around' , 'space-between']

function Array() {
  const [arr] = useState([1, 2, 3, 4, 5])
  const [arr2] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9 , 10 , 11 , 12 , 13 , 14 , 15 ])
  const [direction, setDirection] = useState<Direction>('row')
  const [justify, setJustiry] = useState<JustifyContent>('flex-start')
  const [wrap,setWrap] = useState('nowrap')
  const [align,setAlign] = useState('flex-start')
  //判断主轴方向
  const [main, setMain] = useState('水平方向')
  const [cross,  setCross] = useState('垂直反向')

  function directionChangeHandler() {
    setDirection(direction === 'row' ? 'column' : 'row')
    if (direction === 'row') {
      setMain('水平方向')
      setCross('垂直方向')
    } else if (direction === 'column') {
      setMain('垂直方向')
      setCross('水平方向')
    }
  }
    
  const _style2 = {
    flexDirection: direction,
    justifyContent: justify,
    flexWrap: wrap,
    alignContent: align
  }
  
  return(
    <View className='wrapper'>
      <View className='title'>改变主轴方向 flex-direction</View>
      <Button onClick={directionChangeHandler}>当前值：{direction}</Button>
      
      <View className='title'>换行属性:{wrap}</View>
      {wrapArr.map(item => (
        <Button onClick={() => setWrap(item)}>换行属性 flex-wrap: {item}</Button>
      ))}

      <View className='title'>主轴方向对齐方式：{main}</View>
      {justifyArr.map(item => (
        <Button onClick={() => setJustiry(item)}>justify-content: {item}</Button>
      ))}

      <View className='container' style={_style2}>
        {arr2.map(item => (
          <View className='box'>{item}</View>
        ))}
      </View>
      
      <View className='title'>多轴线对齐方式: {cross}</View>
      {alignArr.map(item =>(
        <Button onClick={() => setAlign(item)}>多轴线对齐：{item}</Button>
      ))}
    </View>
  )
}

export default Array
